import Taro, { useDidShow } from "@tarojs/taro";
import { View, Image, Text, ScrollView } from "@tarojs/components";
import { useState, useEffect } from "react";
import "./index.less";
import MdRenderer from "@/components/MdRenderer";
import Tag from "@/components/Tag";
import { getMotion, delMotion } from "@/request";
import { TMotion } from "@/types";
import { DeleteIcon, SettingIcon } from "@/components/Icons";
import blocks from "@/utils/motions-data";
import CloseIcon from "@/components/Icons/CloseIcon";

export default ({ onClose, id, canHandle = true }) => {
  const [data, setData] = useState<TMotion>(null);

  const getMotionDetail = async () => {
    const data: TMotion = await getMotion(id);
    setData(data);
  };

  useDidShow(() => {
    if (id) {
      getMotionDetail();
    }
  });

  useEffect(() => {
    if (id) {
      getMotionDetail();
    }
  }, [id]);

  const img = `${process.env.IMAGE_URL}/motions/self/${data?.img}`;

  const handlePreview = () => {
    Taro.previewImage({
      urls: [img],
      current: img,
    });
  };

  const handleDelete = () => {
    Taro.showModal({
      content: "确定要删除吗？",
      success: async (res) => {
        if (res.confirm) {
          await delMotion(id);
          onClose();
          Taro.eventCenter.trigger("refresh");
        }
      },
    });
  };

  const handleEdit = () => {
    Taro.navigateTo({
      url: `/pages/motion-add/index?id=${id}`,
    });
  };

  if (!data) return null;

  return (
    <View className="mdetail-container">
      <CloseIcon
        type="white"
        circle="default"
        onClick={onClose}
        size={0.8}
        style={{
          position: "absolute",
          right: "10px",
          top: "10px",
          zIndex: 99999,
        }}
      />
      <View className="mdetail">
        <View className="image-wrapper">
          {data.img ? (
            <Image src={img} mode="aspectFit" onClick={handlePreview} />
          ) : (
            <View className="empty-image-container">
              <Text>暂无图片</Text>
            </View>
          )}
        </View>
        <ScrollView scrollY style={{ height: "68vh" }} className="scroll-view">
          <View className="content-container">
            <View className="title-wrapper">
              <View className="title">{data.name}</View>
              {data.canHandle && canHandle && (
                <View className="flex" style={{ alignItems: "center" }}>
                  <DeleteIcon type="danger" onClick={handleDelete} />
                  <SettingIcon
                    onClick={handleEdit}
                    style={{ marginLeft: "16px" }}
                  />
                </View>
              )}
            </View>

            <View style={{ margin: "16px 0" }}>
              <View className="heading">
                <View className="h2">参与肌肉</View>
              </View>
              <View className="tag-container">
                {data.mainPart?.map((item) => (
                  <Tag key={item}>{blocks.keyToPaths[item]?.name || item}</Tag>
                ))}
                {data.minorPart?.map((item) => (
                  <Tag key={item} type="default">
                    {blocks.keyToPaths[item]?.name || item}
                  </Tag>
                ))}
              </View>
            </View>
            <MdRenderer content={data.description} />
          </View>
        </ScrollView>
      </View>
    </View>
  );
};
